<template>
  <view class="lesson">
    <scroll-view scroll-y class="scroll-Y" @scroll="onScroll" @scrolltolower="scrolltolower">
      <view class="main">
        <template v-for="(item, index) in httpList">
          <view class="thwartwise" :id="`item-${index}`" v-if="item.classify === 'OnlineLesson'" @click="onGoDetail(item)">
            <view class="thwartwise-box" style="background-color: #6147b2">
              <view class="thwartwise-box-image">
                <!-- <template v-if="item.autoVideo">
                  <m-video
                    muted
                    autoplay
                    loop
                    :controls="false"
                    :show-speed-rate-btn="false"
                    :src="item.videoAddress"
                      object-fit="cover"
                    token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                  />
                </template> -->
                <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill"></uv-image>
                <!-- 信息区域 -->
                <view class="thwartwise-box-image-title">
                  <view class="box">
                    <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade)?.label }} </view>
                    <view class="lessonNumber">
                      <uv-icon name="shipin" custom-prefix="custom-icon" color="#fff" size="26.163rpx"></uv-icon>
                      <view style="margin-left: 3px"> {{ item.lesson.lessonNumber }} 课时 </view>
                    </view>
                  </view>
                  <view class="name">
                    {{ item.lesson.name }}
                  </view>
                </view>
                <view class="thwartwise-box-image-shadow"> </view>
              </view>
              <view class="right-title" :style="{ 'text-shadow': `0 0 10px #6147b2` }"> 自助课 </view>
            </view>
            <view class="thwartwise-info"> BENEFIT PROGRAMS </view>
          </view>

          <view class="endways" :id="`item-${index}`" v-else-if="['Lesson'].includes(item.classify)" @click="onGoDetail(item)">
            <view class="endways-box" style="background-color: #47a0f3">
              <view class="endways-box-image">
                <view class="endways-box-image">
                  <!-- <template v-if="item.autoVideo">
                    <m-video
                      muted
                      loop
                      autoplay
                      :controls="false"
                      :show-speed-rate-btn="false"
                      :src="item.videoAddress"
                      object-fit="cover"
                      token="AsMqnVHVX5siSwwz4ckDCOCHCim5XsvNNXR1GkIVmrs="
                    />
                  </template> -->
                  <uv-image :src="item.cover" width="100%" height="100%" mode="aspectFill"></uv-image>
                  <view class="endways-box-image-title">
                    <view class="grade">{{ gradeOptions.find(r => r.val === item.lesson.grade).label }}</view>
                    <view class="name">
                      {{ item.lesson.name }}
                    </view>
                    <view class="time">
                      {{ item.lesson.time }}
                    </view>
                  </view>
                  <view class="thwartwise-box-image-shadow"> </view>
                </view>
              </view>
              <view class="right-title" :style="{ 'text-shadow': `0 0 10px #47a0f3` }">&nbsp;&nbsp;&nbsp;门店教练课 </view>
            </view>
            <view class="endways-info">
              <view class="endways-info-name">
                {{ item.lesson.merchant }}
              </view>
              <uv-icon name="dingwei" custom-prefix="custom-icon" color="#646464" size="24.419rpx"></uv-icon>
            </view>
          </view>
        </template>
      </view>
    </scroll-view>
  </view>
  <uv-toast ref="toastRef"></uv-toast>
  <uv-modal ref="modalRef" title="提示" content="确认删除？" @confirm="onConfirm" showCancelButton></uv-modal>
</template>

<script setup>
  import { ref, reactive, defineProps, defineExpose, watch, nextTick } from 'vue';
  import { checkStatus, defaultImagesList, gradeOptions } from '@/common/js/global.js';
  import { isFileType, toastFn, getWeek, suiji } from '@/common/js/fn';
  import store from '@/store/index.js';
  let random = ref(0);
  const toastRef = ref();
  let { state } = store;

  let params = reactive({
    pageSize: 10,
    currentPage: 1,
    approved: 'all',
    state: 'all'
  });

  let props = defineProps({
    current: {
      type: Number,
      default: 1
    }
  });
  // 监听父元素传参
  watch(
    () => props.current,
    val => {
      if (val !== 0) return;
      nextTick(() => {
        httpDetail();
      });
    },
    { immediate: true }
  );
  let httpList = ref([]),
    httpData = ref();

  const httpDetail = async () => {
    random.value = await suiji(0, defaultImagesList.length - 1);
    httpData.value = await uni.$uv.http.post('app/teacher/detail', { id: state.vuex_user.teacher.id, with_lessons: 1 });
    let { lessons } = httpData.value;
    httpList.value = lessons.map((r, i) => {
      r.classify = 'Lesson';
      let videoAddress = r.video.address,
        cover = r.video.cover,
        autoVideo = false,
        teacher,
        title;
      let lesson = {
        grade: r.lesson.grade || 1,
        name: r.lesson.name,
        merchant: r.merchant.headquater?.name + ` (${r.merchant?.name})`,
        time: getWeek(r.issueDate) + ' ' + r.timeDuration
      };
      if (['Lesson', 'MerchantLesson', 'Video'].includes(r.classify) && [0, 1].includes(i)) {
        autoVideo = true;
      }
      return { ...r, autoVideo, videoAddress, cover, teacher, title, lesson };
    });
  };

  // 触发子组件更新事件
  const sonChange = () => {
    params.currentPage++;
    httpDetail(false);
  };
  defineExpose({ sonChange });
  const onGoDetail = item => {
    if (item.classify === 'Video') {
      uni.$uv.route({
        url: '/pages/teacher/videoPreview',
        params: {
          id: item.id
        }
      });
    } else if (item.classify === 'OnlineLesson') {
      uni.$uv.route({
        url: '/pages/online/index',
        params: {
          id: item.id
        }
      });
    } else {
      uni.$uv.route({
        url: '/pages/main/course',
        params: {
          id: item.id
        }
      });
    }
  };
</script>

<style lang="scss" scoped>
  .lesson {
    height: 100%;
    margin: 22.674rpx 12.209rpx;
    font-family: Source Han Sans CN;
    font-size: 24.419rpx;
    .scroll-Y {
      height: 100%;
    }
    .main {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .thwartwise {
      width: 100%;
      height: 418.605rpx;
      margin-bottom: 26.163rpx;
      display: flex;
      flex-direction: column;
      border-radius: 19.186rpx;
      overflow: hidden;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      &-box {
        flex: 1;
        position: relative;
        &-image {
          height: 100%;
          width: 100%;
          clip-path: inset(0 0 0 0 round 0 174.419rpx 0 0);
          &-title {
            position: absolute;
            bottom: 17.442rpx;
            left: 19.186rpx;
            color: #fff;
            font-size: 20.93rpx;
            z-index: 1;
            .box {
              display: flex;
              .grade {
                width: fit-content;
                background: rgba(97, 71, 178, 1);
                font-size: 19.186rpx;
                font-weight: 900;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                padding: 3px 10.465rpx;
              }
              .lessonNumber {
                margin-left: 10.465rpx;
                width: fit-content;
                background: #000;
                font-size: 19.186rpx;
                font-weight: 900;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                padding: 3px 10.465rpx;
                display: flex;
                align-items: center;
              }
            }
            .name {
              font-size: 24.419rpx;
              font-weight: 900;
              margin-bottom: 10.465rpx;
              margin-top: 6.977rpx;
            }
          }
          &-shadow {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 340.116rpx;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 44.6%, rgba(0, 0, 0, 0.7) 100%);
          }
        }
      }
      &-info {
        background: #e5e5e5;
        height: 64.535rpx;
        color: #646464;
        font-size: 20.93rpx;
        padding-left: 26.163rpx;
        display: flex;
        align-items: center;
      }
    }
    .endways {
      height: 589.535rpx;
      width: 352.07rpx;
      margin-bottom: 26.163rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border-top-left-radius: 19.186rpx;
      border-top-right-radius: 19.186rpx;
      -webkit-backface-visibility: hidden;
      -webkit-transform: translate3d(0, 0, 0);
      &-box {
        flex: 1;
        position: relative;
        border-bottom-left-radius: 19.186rpx;
        border-bottom-right-radius: 19.186rpx;
        overflow: hidden;
        &-image {
          height: 100%;
          width: 100%;
          clip-path: inset(0 0 0 0 round 0 174.419rpx 0 0);
          &-title {
            position: absolute;
            bottom: 17.442rpx;
            left: 19.186rpx;
            color: #fff;
            font-size: 20.93rpx;
            z-index: 1;

            .grade {
              width: fit-content;
              background: rgba(97, 71, 178, 1);
              font-size: 19.186rpx;
              font-weight: 900;
              text-align: center;
              color: rgba(255, 255, 255, 1);
              padding: 3px 10.465rpx;
            }
            .name {
              font-size: 24.419rpx;
              font-weight: 900;
              margin-bottom: 10.465rpx;
              margin-top: 6.977rpx;
            }
          }
        }
      }
      &-info {
        height: 38.372rpx;
        display: flex;
        align-items: center;
        padding-top: 8.721rpx;
        box-sizing: border-box;

        &-name {
          padding-left: 20.93rpx;
          color: #646464;
          font-size: 20.93rpx;
          font-weight: 400;
          margin-right: 17.442rpx;
        }
        // background-color: #fafafa;
      }
    }
  }
  .right-title {
    position: absolute;
    width: 94.209rpx;
    color: #ffffff;
    right: 13.953rpx;
    top: 5.233rpx;
    font-weight: bold;
    color: white; /* 文字颜色 */
    text-align: right;
    // text-shadow: -1px -1px 0 #47a0f3, 1px -1px 0 #47a0f3, -1px 1px 0 #47a0f3, 1px 1px 0 #47a0f3; /* 描边颜色 */
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>
